<template>
	<view class="tabbar-container">
		<block>
			<view class="scan_it" @click="handleScanit">
				<image class="scan_img" src="../../../static/tabbar/Scanit.png"></image>
			</view>
			<view class="tabbar-item" 
				v-for="(item, index) in tabbarList" 
				:key="index" 
				:class="[item.centerItem ? ' center-item' : '']" 
				@click="changeItem(item)"
			>
				<view class="item-top">
					<image :src="currentItem == item.id ? item.selectIcon : item.icon"></image>
				</view>
				<view class="item-bottom" :class="[currentItem == item.id ? 'item-active' : '']">
					<text>{{ item.text }}</text>
				</view>
			</view>
		</block>
	</view>
</template>
 
<script>
export default {
	props: {
		currentPage: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			showDialog:true,
			currentItem: 0,
			tabbarList: [
				{
					id: 0,
					path: '/pages/index/index',
					icon: '/static/tabbar/home_normal.png',
					selectIcon: '/static/tabbar/home_active.png',
					text: '首页',
					centerItem: false
				},
				{
					id: 1,
					path: '/pages/code/code',
					// icon: '/static/tabbar/Scanit.png',
					// selectIcon: '/static/tabbar/Scanit.png',
					centerItem: true
				},
				{
					id: 2,
					path: '/pages/my/my',
					icon: '/static/tabbar/my_normal.png',
					selectIcon: '/static/tabbar/my_active.png',
					text: '我的',
					centerItem: false
				}
			]
		};
	},
	mounted() {
		this.currentItem = this.currentPage;
		uni.hideTabBar();
	},
	methods: {
		changeItem(item) {
			let _this = this;
			//_this.currentItem = item.id;
			uni.switchTab({
				url: item.path
			});
		},
		handleScanit(){
			this.$emit('handleScanit', this.showDialog);
		}
	}
};
</script>
<style>
view {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
.tabbar-container {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 55px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
	display: flex;
	align-items: center;
	padding: 5px 0;
	color: #999999;
}
.tabbar-container .tabbar-item {
	width: 33.3%;
	height: 100rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.scan_it{
	width: 40px;
	height: 40px;
	position: absolute;
	top: -18px;
	left: calc(50% - 20px);
	z-index: 999;
}
.scan_img{
	width: 40px;
	height: 40px;
}
.tabbar-container .item-active {
	font-size: 14px;
	font-weight: bold;
	color: #FA254F;
}
.tabbar-container .center-item {
	display: block;
	position: relative;
}
.tabbar-container .tabbar-item .item-top {
	width: 30px;
	height: 30px;
}
.tabbar-container .center-item .item-top {
	flex-shrink: 0;
	width: 70px;
	height: 70px;
	position: absolute;
	top: -35px;
	left: calc(50% - 35px);
	bottom: 25px;
	border-radius: 50%;
	background-color: #fff;
	box-shadow: 0px -5px 0px -5px rgba(0, 0, 0, 0.2);
	border-top: 1px solid rgba(0, 0, 0, 0.2);
}
.tabbar-container .tabbar-item .item-top image {
	width: 100%;
	height: 100%;
}
.tabbar-container .tabbar-item .item-bottom {
	font-size: 14px;
	width: 100%;
}
.san_code{
	width: 40px;
	height: 40px;
}
.tabbar-container .center-item .item-bottom {
	position: absolute;
	bottom: 2px;
}
</style>